<template>
  <div class="content">
    <div class="left">
      <div class="crm-layout-left-title">API文档</div>
      <el-menu
        router
        default-active="/developmentguide/research/s1"
        class="el-menu-vertical-demo"
        style="border-right: 0"
      >
        <el-menu-item :class="activeNum === index ? 'active':''" v-for="(d,index) in data.list" :key="index" @click="handleNodeClick(d,index)">{{d.label}}</el-menu-item>
      </el-menu>
    </div>
    <div class="right">
      <Top :listcontent="listcontent"></Top>
      <Bottom :listcontent="listcontent" :width="width"></Bottom>
    </div>
  </div>
</template>
<script>
import Top from "../../components/listContent/top.vue";
import Bottom from "../../components/listContent/bottom.vue";
export default {
  components: {
    Top,
    Bottom
  },
  data() {
    return {
      activeNum:0,
      data: {
        list: [
          {
            label: '用户',
            content: [
              [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],
            ]
          },
          {
            label: '会员',
            content: [
              [
                'youzan.scrm.customer.get.record',
                '权益卡购卡记录',
                '微商城单店'
              ], [
                'youzan.crm.customer.pointgoods.delete',
                '删除积分商城的积分商品信息',
                '微商城单店|零售单店'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.crm.customer.points.changelog.search',
                '查询用户积分日志',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取C端用户等级',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.scrm.level.get.userlevel',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.users.weixin.follower.tag',
                '删除用户的权益卡',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],
            ]
          },
          {
            label: '商品',
            content: [
              [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],
            ]
          }, 
          {
            label: '评价',
            content: []
          }, 
          {
            label: '物流',
            content: []
          }, 
          {
            label: '库存',
            content: []
          }, 
          {
            label: '交易',
            content: []
          }, 
          {
            label: '退款',
            content: []
          }, 
          {
            label: '营销',
            content: []
          },
          {
            label: '储值',
            content: [
              [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.users.weixin.follower.tag',
                '获取单个粉丝标签集合',
                '微商城单店|零售单店|教育多校区-总部'
              ], [
                'youzan.user.openid.get',
                '获取有赞openId',
                '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
              ],
            ]
          }, 
          {
            label: '店铺',
            content: []
          },
          {
            label: '数据',
            content: []
          },
          {
            label: '客服',
            content: []
          },
          {
            label: '财务',
            content: []
          },
          {
            label: '大客户',
            content: []
          },
          {
            label: '消费者',
            content: []
          },
          {
            label: '',
            content: []
          },
        ]
      },
      listcontent: {
        title: 'API列表',
        title1: '用户',
        head: ['API文档', 'API描述', '支持店铺类型'],
        filter: [
          { quanbu: '全部' },
          { wei: '微商城单店' },
          { zongbuD: '有赞连锁D-总部' },
          { wangdianD: '有赞连锁D-总部' },
          { ling: '零售单店' }
        ],
        content: [
          [
            'youzan.user.openid.get',
            '获取有赞openId',
            '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
          ], [
            'youzan.user.openid.get',
            '获取有赞openId',
            '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
          ], [
            'youzan.users.weixin.follower.tag',
            '获取单个粉丝标签集合',
            '微商城单店|零售单店|教育多校区-总部'
          ], [
            'youzan.user.openid.get',
            '获取有赞openId',
            '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
          ], [
            'youzan.user.openid.get',
            '获取有赞openId',
            '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
          ], [
            'youzan.user.openid.get',
            '获取有赞openId',
            '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
          ], [
            'youzan.users.weixin.follower.tag',
            '获取单个粉丝标签集合',
            '微商城单店|零售单店|教育多校区-总部'
          ], [
            'youzan.users.weixin.follower.tag',
            '获取单个粉丝标签集合',
            '微商城单店|零售单店|教育多校区-总部'
          ], [
            'youzan.users.weixin.follower.tag',
            '获取单个粉丝标签集合',
            '微商城单店|零售单店|教育多校区-总部'
          ], [
            'youzan.user.openid.get',
            '获取有赞openId',
            '微商城单店|零售单店|有赞连锁D-总部|有赞连锁D-网店|有赞连锁D-合伙人|零售连锁前置仓|有赞连锁L-总部|有赞连锁L-总部-高级版|有赞连锁L-网店|有赞连锁L-网店-Lite|有赞连锁L-供货商|有赞连锁L-独立仓库|美业总部|教育单校区|酒店'
          ],
        ]
      },
      width:{
        th1:'width:200px',
        th2:'width:134px',
        th3:'width:498px',
      },
      // 多级树结构
      /* list: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }, {
          label: '用户'
        }, {
          label: '会员'
        }, {
          label: '商品'
        }, {
          label: '评价'
        }, {
          label: '物流'
        }, {
          label: '库存'
        }, {
          label: '交易'
        }, {
          label: '退款'
        }, {
          label: '营销'
        }, {
          label: '储值'
        }, {
          label: '店铺'
        }, {
          label: '数据'
        }, {
          label: '客服'
        }, {
          label: '财务'
        }, {
          label: '大客户'
        }, {
          label: '消费者'
        }, {
          label: '推广'
        }, {
          label: '跨境海淘'
        }, {
          label: '创新业务'
        }, {
          label: '服务通知'
        }, {
          label: '平台通用'
        }, {
          label: '教育'
        }, {
        }, {
          label: '导购'
        }, {
          label: '有赞CRM'
        }], */
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  methods: {
    handleNodeClick(d,i) {
      this.listcontent.title1 = d.label;
      this.listcontent.content = d.content;
      this.activeNum = i;
      console.log(this.listcontent.content);
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
    width: 1200px;
    margin: auto;

  .left {
      width: 360px;
      padding-right: 22px;
      margin-top: 24px;
      border-right: 1px solid #ebedf0;
      box-sizing: border-box;

    .crm-layout-left-title {
      font-weight: 700;
      font-size: 16px;
      height: 46px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ebedf0;
      margin-bottom: 10px;
    }
    /deep/ .el-submenu__title {
      text-align: left;
    }

    /deep/.el-menu-item {
      text-align: left;
      height: 40px;
      line-height: 40px;

    }
    .active{
      color: #409EFF;
    }
  }

}
</style>